<template>
    <view class="account-page">
        <!-- 顶部导航栏 -->
        <view class="header-nav">
            <view class="nav-left" @tap="goBack">
                <text class="back-icon">‹</text>
            </view>
            <view class="nav-center">
                <text class="nav-title">账户余额</text>
            </view>
            <view class="nav-right" @tap="refreshData">
                <text class="refresh-icon">↕</text>
            </view>
        </view>

        <!-- 余额卡片 -->
        <view class="balance-card">
            <view class="balance-header">
                <text class="balance-label">小微业务/收益余额(元)</text>
                <text class="withdrawal-record" @tap="goToWithdrawalRecord">提现记录</text>
            </view>
            <view class="balance-amount">
                <text class="amount-text">{{ balanceAmount }}</text>
                <view class="withdrawal-btn" @tap="withdraw">提现</view>
            </view>
        </view>

        <!-- 日期筛选 -->
        <view class="filter-section">
            <view class="date-filter">
                <text class="filter-label">选择日期:</text>
                <view class="date-input" @tap="showDatePicker">
                    <text class="date-text">{{ dateRange }}</text>
                </view>
                <view class="filter-btn" @tap="applyFilter">筛选</view>
            </view>
        </view>

        <!-- 交易类型标签 -->
        <view class="transaction-tabs">
            <view class="tab-item" :class="{ active: activeTab === 'income' }" @tap="switchTab('income')">
                <text class="tab-text">进账记录</text>
            </view>
            <view class="tab-item" :class="{ active: activeTab === 'deduction' }" @tap="switchTab('deduction')">
                <text class="tab-text">扣款记录</text>
            </view>
        </view>

        <!-- 交易记录列表 -->
        <view class="transaction-list">
            <view class="transaction-item" v-for="(item, index) in transactionList" :key="index">
                <view class="transaction-left">
                    <text class="transaction-desc">{{ item.description }}</text>
                    <text class="transaction-date">{{ item.date }}</text>
                </view>
                <view class="transaction-right">
                    <text class="transaction-amount" :class="{ 'income': item.type === 'income', 'deduction': item.type === 'deduction' }">
                        {{ item.amount }}
                    </text>
                    <text class="transaction-status">{{ item.status }}</text>
                </view>
            </view>
        </view>
    </view>
</template>


<script>
    import util from '@/common/utils'
    import dayjs from 'dayjs';

    export default {
        data() {
            return {
                balanceAmount: '21,637.88',
                dateRange: '2025.07.27 ~ 2025.08.27',
                dateRangeValue: [new Date('2025-07-27').getTime(), new Date('2025-08-27').getTime()],
                minDate: new Date('2020-01-01').getTime(),
                maxDate: new Date('2030-12-31').getTime(),
                activeTab: 'income', // income: 进账记录, deduction: 扣款记录
                transactionList: [
                    {
                        description: '分润',
                        date: '2025-08-27',
                        amount: '+59.48',
                        type: 'income',
                        status: '成功'
                    },
                    {
                        description: '物联网增值服务费',
                        date: '2025-08-27',
                        amount: '+44.16',
                        type: 'income',
                        status: '成功'
                    },
                    {
                        description: '达标返现',
                        date: '2025-08-27',
                        amount: '+46',
                        type: 'income',
                        status: '成功'
                    },
                    {
                        description: '服务费返现',
                        date: '2025-08-27',
                        amount: '+183.08',
                        type: 'income',
                        status: '成功'
                    },
                    {
                        description: '分润',
                        date: '2025-08-26',
                        amount: '+12',
                        type: 'income',
                        status: '成功'
                    },
                    {
                        description: '分润',
                        date: '2025-08-25',
                        amount: '+66.21',
                        type: 'income',
                        status: '成功'
                    },
                    {
                        description: '服务费返现',
                        date: '2025-08-24',
                        amount: '+183.08',
                        type: 'income',
                        status: '成功'
                    }
                ]
            }
        },
        onLoad() {
            this.loadTransactionData();
        },
        methods: {
            goBack() {
                uni.navigateBack();
            },
            refreshData() {
                // 刷新数据
                this.loadTransactionData();
            },
            goToWithdrawalRecord() {
                // 跳转到提现记录页面
                uni.navigateTo({
                    url: '/pages/user/withdrawalRecord'
                });
            },
            withdraw() {
                // 提现功能
                uni.navigateTo({
                    url: '/pages/user/withdraw'
                });
            },
            onDateConfirm(e) {
                // 日期选择确认
                console.log('选择的日期:', e);
                if (e && e.length === 2) {
                    const startDate = dayjs(e[0]).format('YYYY.MM.DD');
                    const endDate = dayjs(e[1]).format('YYYY.MM.DD');
                    this.dateRange = `${startDate} ~ ${endDate}`;
                    this.dateRangeValue = e;
                }
            },
            onDateCancel() {
                // 日期选择取消
                console.log('取消选择日期');
            },
            applyFilter() {
                // 应用筛选
                this.loadTransactionData();
            },
            switchTab(tab) {
                this.activeTab = tab;
                this.loadTransactionData();
            },
            loadTransactionData() {
                // 根据当前标签和日期范围加载交易数据
                // 这里可以调用API获取数据
                console.log('加载交易数据', this.activeTab, this.dateRange);
            }
        }
    };
</script>

<style lang="scss" scoped>
    .account-page {
        background-color: #F8F8F9;
        min-height: 100vh;

        // 顶部导航栏
        .header-nav {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 20rpx 30rpx;
            background: #fff;
            border-bottom: 1rpx solid #eee;

            .nav-left {
                width: 60rpx;
                height: 60rpx;
                display: flex;
                align-items: center;
                justify-content: center;

                .back-icon {
                    font-size: 48rpx;
                    color: #333;
                    font-weight: bold;
                }
            }

            .nav-center {
                flex: 1;
                text-align: center;

                .nav-title {
                    font-size: 36rpx;
                    font-weight: bold;
                    color: #333;
                }
            }

            .nav-right {
                width: 60rpx;
                display: flex;
                align-items: center;
                justify-content: center;

                .refresh-icon {
                    font-size: 32rpx;
                    color: #333;
                    font-weight: bold;
                }
            }
        }

        // 余额卡片
        .balance-card {
            margin: 20rpx 30rpx;
            background: linear-gradient(135deg, #427AF5 0%, #5A8BFF 100%);
            border-radius: 20rpx;
            padding: 40rpx 30rpx;
            position: relative;
            overflow: hidden;

            // 背景装饰图案
            &::before {
                content: '';
                position: absolute;
                right: -20rpx;
                top: -20rpx;
                width: 200rpx;
                height: 200rpx;
                background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M20,20 L80,20 L80,80 L20,80 Z" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="2"/><path d="M30,30 L70,30 L70,70 L30,70 Z" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="2"/><path d="M40,40 L60,40 L60,60 L40,60 Z" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="2"/></svg>') no-repeat;
                background-size: contain;
                opacity: 0.3;
            }

            .balance-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 30rpx;

                .balance-label {
                    font-size: 28rpx;
                    color: #fff;
                    opacity: 0.9;
                }

                .withdrawal-record {
                    font-size: 26rpx;
                    color: #fff;
                    opacity: 0.9;
                }
            }

            .balance-amount {
                display: flex;
                justify-content: space-between;
                align-items: center;

                .amount-text {
                    font-size: 64rpx;
                    font-weight: bold;
                    color: #fff;
                    font-family: 'Arial', sans-serif;
                }

                .withdrawal-btn {
                    background: #fff;
                    color: #427AF5;
                    padding: 8rpx 30rpx;
                    border-radius: 6rpx;
                    font-size: 26rpx;
                    font-weight: normal;
                    border: none;
                }
            }
        }

        // 日期筛选区域
        .filter-section {
            margin: 0 30rpx 20rpx 30rpx;

            .date-filter {
                display: flex;
                align-items: center;
                background: #fff;
                padding: 20rpx;
                border-radius: 10rpx;

                .filter-label {
                    font-size: 28rpx;
                    color: #333;
                    margin-right: 20rpx;
                }

                .date-input {
                    flex: 1;
                    background: #f5f5f5;
                    padding: 16rpx 20rpx;
                    border-radius: 8rpx;
                    margin-right: 20rpx;
                    position: relative;
                    cursor: pointer;

                    .date-text {
                        font-size: 28rpx;
                        color: #333;
                        display: block;
                        width: 100%;
                    }
                }

                .filter-btn {
                    background: #fff;
                    color: #427AF5;
                    padding: 0 10rpx;
                    font-size: 28rpx;
                    font-weight: normal;
                    border: none;
                }
            }
        }

        // 交易类型标签
        .transaction-tabs {
            display: flex;
            margin: 0 30rpx 20rpx 30rpx;
            background: #fff;
            border-radius: 10rpx;
            overflow: hidden;

            .tab-item {
                flex: 1;
                text-align: center;
                padding: 24rpx 0;
                position: relative;

                &.active {
                    .tab-text {
                        color: #427AF5;
                        font-weight: bold;
                    }

                    &::after {
                        content: '';
                        position: absolute;
                        bottom: 0;
                        left: 50%;
                        transform: translateX(-50%);
                        width: 60rpx;
                        height: 4rpx;
                        background: #427AF5;
                        border-radius: 2rpx;
                    }
                }

                .tab-text {
                    font-size: 30rpx;
                    color: #666;
                }
            }
        }

        // 交易记录列表
        .transaction-list {
            margin: 0 30rpx;
            background: #fff;
            border-radius: 10rpx;
            overflow: hidden;

            .transaction-item {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 30rpx 20rpx;
                border-bottom: 1rpx solid #f0f0f0;

                &:last-child {
                    border-bottom: none;
                }

                .transaction-left {
                    flex: 1;

                    .transaction-desc {
                        display: block;
                        font-size: 30rpx;
                        color: #333;
                        margin-bottom: 8rpx;
                    }

                    .transaction-date {
                        font-size: 24rpx;
                        color: #999;
                    }
                }

                .transaction-right {
                    text-align: right;

                    .transaction-amount {
                        display: block;
                        font-size: 32rpx;
                        font-weight: bold;
                        margin-bottom: 8rpx;

                        &.income {
                            color: #ff4757;
                        }

                        &.deduction {
                            color: #2ed573;
                        }
                    }

                    .transaction-status {
                        font-size: 24rpx;
                        color: #999;
                    }
                }
            }
        }
    }
</style>